<!DOCTYPE html>
<html lang="en" >
<head xmlns:th="http://www.thymeleaf.org">
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<script src="/js/jquery-3.6.1.min.js"></script>
<script src="/js/bootstrap.min.js"></script>

<style>
    body{
        margin: 0px;
        padding: 0px;
        background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
    }
    tr{
        font-size: 1pc;
        text-align: center;
    }
    th{
        font-size: 1pc;
        text-align: center;
    }
    span{
        font-size: 1pc;
        font-weight: bold;

    }
    #search{
        border-radius: 10px;
        font-weight: bold;
    }
    button{
        width: 80px;
        height: 40px;
        border-radius: 10px;
        margin-left: 1px;
        font-weight: bold;
    }
    button:hover{
        background-color: #867e7e;
    }
</style>
</head>
<body>

<div class="container-fluid">
<table class="table table-hover">
    <thead>
    <span>请输入姓名:</span> <input type='text' style='width: 200px;height:40px;'placeholder="请输入姓名" id="search" >
    <button  onclick="myFunction()">单独查询</button>
    <button  onclick="myFunction1()">全部查询</button>
    <button  type="button" class="btn btn-primary btn" data-toggle="modal" data-target="#myModal">
        新增老师
    </button>
    <tr >
        <th>#</th>
        <th>工号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th style="width: 100px">操作</th>
    </tr>
    </thead>
    <tbody id="teachersTb">
    </tbody>
</table>
</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">新增老师信息</h4>
        </div>
        <div class="modal-body">
            <form id="FormTeachers">
                <div class="form-group">
                    <label for="worknumber">工号</label>
                    <input type="text" class="form-control" id="worknumber" name="worknumber" placeholder="请输入工号">
                </div>
                <div class="form-group">
                    <label for="name">姓名</label>
                    <input type="text" class="form-control" id="name" name="name" placeholder="请输入姓名">
                </div>
                <div class="form-group">
                    <label for="sex">性别</label>
                    <select class="form-control" id="sex" name="sex">
                        <option >男</option>
                        <option >女</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="age">年龄</label>
                    <input type="text" class="form-control" id="age" name="age" placeholder="请输入年龄">
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="submit" class="btn btn-primary" onclick="addTeachers()">新增老师</button>
        </div>
    </div>
</div>
</div>
<!--新增老师信息-->

<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel1">编辑老师信息</h4>
        </div>
        <div class="modal-body">
            <form id="FormTeachers1">
                <input hidden="hidden" id="id"  name="id" />
                <div class="form-group">
                    <label for="worknumber">工号</label>
                    <input type="text" class="form-control" id="worknumber1" name="worknumber" placeholder="请输入工号">
                </div>
                <div class="form-group">
                    <label for="name">姓名</label>
                    <input type="text" class="form-control" id="name1" name="name" placeholder="请输入姓名">
                </div>
                <div class="form-group">
                    <label for="sex">性别</label>
                    <select class="form-control" id="sex1" name="sex">
                        <option >男</option>
                        <option >女</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="age">年龄</label>
                    <input type="text" class="form-control" id="age1" name="age" placeholder="请输入年龄">
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="submit" class="btn btn-primary" onclick="store()">保存</button>
        </div>
    </div>
</div>
</div>
</body>
<script type="text/javascript">
function store(){
    var data=$("#FormTeachers1").serialize();
    console.log(data);
    console.log(1111);
    $.ajax({
        url:"/webapi/teachers/update",
        method: "put",
        data:data
    }).done(function (){
        loadTable();
        $("#myModal1").modal('hide');
    })
}
function editTeachers(id){
  $("#myModal1").modal('show');
  $.ajax({
        url:"/webapi/teachers/get/"+id
  }).done(function (rs){
      $("#id").val(rs.id);
      $("#worknumber1").val(rs.worknumber);
      $("#name1").val(rs.name);
      $("#sex1").val(rs.sex);
      $("#age1").val(rs.age);
  })
}
//编辑信息
function loadTable(){
    $(function () {
        $.ajax({
            url: '/webapi/teachers/list'
        }).done(function (rs) {
            //计算 rs数组的长度
            alert("操作成功!");
            var len = rs.length;
            let html = "";
            //这个地方则就是遍历数组
            for (var i = 0; i < len; i++) {
                var item = rs[i];
                html += "<tr>"
                    + "<td>" + item.id + "</td>"
                    + "<td>" + item.worknumber + "</td>"
                    + "<td>" + item.name + "</td>"
                    + "<td>" + item.sex + "</td>"
                    + "<td>" + item.age + "</td>"
                    + "<td ><a href='#' onclick='editTeachers("+item.id+");'>编辑</a>  <a href='#' onclick='deleteTeachers("+item.id+")'>删除</a></td>"
                    + "</tr>";
            }
            $("#teachersTb").html(html);
        })
    })
}//直接全部查询完成
function deleteTeachers(id){
    if (confirm("你确定要删除吗？")){
        $.ajax({
            url:"/webapi/teachers/delete"+id,
            method:"delete"
        }).done(function (){
            loadTable();
        });
    }
}


function addTeachers(){
    var data=$("#FormTeachers").serialize();
    $.ajax({
        url:"/webapi/teachers/insert",
        type:"post",
        data:data
    }).done(function (){
        loadTable();
        $("#myModal").modal('hide')
    })
}
function myFunction() {
    let text = document.getElementById("search").value;
    if (chkstrlen(text) % 2 != 0 || text == '') {
        //清空输入框
        document.getElementById("search").value = '';
        alert("格式错误或输入为空,请重新输入!");
    } else {
        $(function () {
            // $("#text").text()
            $.ajax({
                url: '/webapi/teachers/list'
            }).done(function (rs) {
                //计算 rs数组的长度
                var len = rs.length;
                let html = "";
                var count = 0;//
                //这个地方则就是遍历数组
                for (var i = 0; i < len; i++) {
                    //由于rs[i]是一个对象，则我们输入的值可以与对象中的属性的值作比较
                    if (text == (rs[i].name)) {
                        alert("查询成功");
                        var item = rs[i];
                        html += "<tr>"
                            + "<td>" + item.id + "</td>"
                            + "<td>" + item.worknumber + "</td>"
                            + "<td>" + item.name + "</td>"
                            + "<td>" + item.sex + "</td>"
                            + "<td>" + item.age + "</td>"
                            + "<td ><a href='#' onclick='editTeachers("+item.id+");'>编辑</a>  <a href='#' onclick='deleteTeachers("+item.id+")'>删除</a></td>"
                            + "</tr>";
                        $("#teachersTb").html(html);
                        count++;
                        document.getElementById("search").value = '';
                        break;
                    }
                }
                if (count == 0) {
                    alert("查无此人！");
                    console.log(text);
                    document.getElementById("search").value = '';
                    $("#teachersTb").html(html);
                }
            })
        })
    }
}
//全部查询函数
function myFunction1() {
    var text = document.getElementById("search").value;
    if (text == '') {
        $(function () {
            $.ajax({
                url: '/webapi/teachers/list'
            }).done(function (rs) {
                //计算 rs数组的长度
                var len = rs.length;
                let html = "";
                alert("查询成功");
                //这个地方则就是遍历数组
                for (var i = 0; i < len; i++) {
                    var item = rs[i];
                    html += "<tr>"
                        + "<td>" + item.id + "</td>"
                        + "<td>" + item.worknumber + "</td>"
                        + "<td>" + item.name + "</td>"
                        + "<td>" + item.sex + "</td>"
                        + "<td>" + item.age + "</td>"
                        + "<td ><a href='#' onclick='editTeachers("+item.id+");'>编辑</a>  <a href='#' onclick='deleteTeachers("+item.id+")'>删除</a></td>"
                        + "</tr>";
                }
                $("#teachersTb").html(html);
            })
        })
    } else {
        alert("不需要输入数据查询即可！");
        document.getElementById("search").value = '';
        $("teachersTb").html('');
    }
}
//判断是否输入的数据为汉字
function chkstrlen(str) {
    var strlen = 0;
    for (var i = 0; i < str.length; i++) {
        if (str.charCodeAt(i) > 255) //如果是汉字，则字符串长度加2
            strlen += 2;
        else
            //是汉字的情况
            strlen++;
    }
    return strlen;
}
</script>

</html>